<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="所属社区" prop="belonging_community">
        <el-select @change="selectGet($event)" v-model="formData.belonging_community"  clearable :style="{width: '90%'}">
          <el-option v-for="(item) in this.dataselect"   :key="item.communityCode" :label="item.belongingCommunity" :value="item.communityCode" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="街路巷（村）" prop="street_road_lan">
        <el-input v-model="formData.street_road_lan" clearable :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item label="门牌号" prop="house_number">
        <el-input v-model="formData.house_number" clearable :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item label="小区" prop="housing_estate">
        <el-input v-model="formData.housing_estate" clearable :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item label="建筑物名称" prop="nameof_buildings">
        <el-input v-model="formData.nameof_buildings" clearable :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item label="单元名称" prop="nameof_theunit">
        <el-input v-model="formData.nameof_theunit" clearable :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item label="房间名称" prop="nameof_theroom">
        <el-input v-model="formData.nameof_theroom" clearable :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item label="地址全称" prop="complete_address">
        <el-input v-model="formData.complete_address" clearable :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item label="户主名字" prop="house_hold_names">
        <el-input v-model="formData.house_hold_names" clearable :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item label="x" prop="x">
        <el-input v-model="this.x" readonly clearable :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item label="y" prop="y">
        <el-input v-model="this.y" readonly clearable :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="insertdata">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
  import { selectBybelongingCommunity,insertdatalist} from "@/api/address/userAddress";

  export default {
    name:'insertPoint',
    components: {},
    props: {
      x:null,
      y:null,
    },
    data() {
      return {
        dataselect:null,
        belongingCommunity:null,
        communityCode:null,

        formData: {
          belonging_community: undefined,
          communityCode:undefined,
          street_road_lan: undefined,
          house_number: undefined,
          housing_estate: undefined,
          nameof_buildings: undefined,
          nameof_theunit: undefined,
          nameof_theroom: undefined,
          complete_address: undefined,
          house_hold_names: undefined,
          x: undefined,
          y: undefined,
        },
        rules: {
          belonging_community: [],
          community_code:[],
          street_road_lan: [],
          house_number: [],
          housing_estate: [],
          nameof_buildings: [],
          nameof_theunit: [],
          nameof_theroom: [],
          complete_address: [],
          house_hold_names: [],
          x: [],
          y: [],
        },
        belonging_communityOptions: [{
          "label": "选项一",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }],
      }
    },
    computed: {},
    watch: {},
    mounted() {
      this.selectlist()
    },
    methods: {
      selectGet(communityCode) {
        let obj = {};
        obj = this.dataselect.find((item) => {//这里的selectList就是上面遍历的数据源
          return item.communityCode === communityCode;//筛选出匹配数据
        });
        this.belongingCommunity=obj.belongingCommunity//我这边的name就是对应label的
        this.communityCode= communityCode
      },

      selectlist(){
        selectBybelongingCommunity().then(response=>{
         if(!response.data){response.data={}}
         this.dataselect =response.data;
        }).catch(err=>console.log(err))
      },
      insertdata(){
        var dataList=
          {
            belongingCommunity:this.belongingCommunity,
            communityCode:this.communityCode,
            streetRoadLan:this.formData.street_road_lan,
            houseNumber:this.formData.house_number,
            housingEstate:this.formData.housing_estate,
            nameofBuildings:this.formData.nameof_buildings,
            nameofTheunit:this.formData.nameof_theunit,
            nameofTheroom:this.formData.nameof_theroom,
            completeAddress:this.formData.complete_address,
            householdNames:this.formData.house_hold_names,
            x:this.x,
            y:this.y,
          }
          insertdatalist(dataList).then(res=>{
            alert(res.msg)
          }).catch(err=>console.log(err))
      },
    }
  }

</script>
<style>
</style>
